<template>
  <div class="hello">
    <div>
      <label>国家：</label>
      <input list="countries" v-model="country">
      <datalist id="countries">
        <option v-for="country in countries" :key="country.name" :value="country.name"></option>
      </datalist>
    </div>
    <div style="margin: 100px;">
      任务进度 <input type="number" v-model="step">
      <div class="step-finely five clearfix">
        <div class="item active"><span class="tip">1</span><span class="ms">选择证书</span></div>
        <div-r class="item" :class="{ 'active': step >= 2 }"><span class="tip">2</span><span class="ms">填写申请单</span>
        </div-r>
        <div class="item" :class="{ 'active': step >= 3 }"><span class="tip">3</span><span class="ms">支付订单</span>
        </div>
        <div class="item" :class="{ 'active': step >= 4 }"><span class="tip">4</span><span class="ms">收货</span>
        </div>
        <div class="item" :class="{ 'active': step == 5 }"><span class="tip">5</span><span class="ms">评价</span>
        </div>
      </div>
    </div>

    <div id="cotent" style="margin: 50px;">
      <div class="panel panel-info">
        <div class="panel-heading">
          <h3 class="panel-title weight"><i class="iconfont icon-my weight mr10"></i>法人代表CA证书
          </h3>
        </div>
        <div class="panel-body color3" style="position: relative">
          <p class="font14 lead">
            <span class="weight">证书用途：</span><br>
            身份验证、响应文件签章、开标签到、响应文件、合同法人授权签章等。
          </p>
          <p class="font14 lead mb0">
            <span class="weight">办理证书所需资料：</span><br>
            1、数字承诺书（签字签章，上传电子档）<br>
            3、企业授权函（签字签章，上传电子档），函件内需附被委托人身份证复印件，若为法人本人办理，则不需要。
          </p>
          <p class="font14 lead mb0" style=" position: absolute; right: 130px; bottom: 32px">
            <span class="weight">证书费用：</span><br>
            存储介质（CA盘）：<span class="colorRed">￥30</span>&nbsp;/<span class="font12">个</span><br>
            法人数字证书含签章费用：<span class="colorRed">￥270</span>&nbsp;/<span class="font12">年</span>
          </p>
        </div>
      </div>
    </div>

   


  </div>
</template>

<script>
export default {
  data() {
    return {
      country: '',
      countries: [
        {
          name: '中国'
        },
        {
          name: '美国'
        },
        {
          name: '日本'
        }
      ],
      step: 2
    }
  },
  watch: {
    country(newVal) {
      console.log(newVal)
    }
  }
}
</script>
<style scoped>
.panel-title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 16px;
  color: inherit;
}

.panel-info>.panel-heading {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}

.panel-heading {
  padding: 10px 15px;
  border-bottom: 1px solid transparent;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;

  line-height: 35px;
  text-align: left;
  font-size: 14px;
}

.panel-body {
  padding: 10px 15px;
  border-bottom: 1px solid transparent;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.panel-info {
  text-align: left;
  box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.1);
  border-color: #bce8f1 !important;
}

.panel {
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 4px;
}

.weight {
  font-weight: bold;
}

.colorRed {
  color: red;
}

/* 任务进度 */
.step-finely {
  position: relative;
}

.step-finely.sm {
  width: 600px;
  margin: 0 auto;
}

.step-finely>.item {
  position: relative;
  float: left;
  z-index: 1;
}

/*3个任务时使用 */
.step-finely.threes>.item {
  width: 33.3333%;
}

/*4个任务时使用 */
.step-finely.four>.item {
  width: 25%;
}

/*5个任务时使用，根据宽度自行添加 */
.step-finely.five>.item {
  width: 20%;
}

.step-finely>.item.active {
  z-index: 2;
}

.step-finely>.item:before,
.step-finely>.item:after {
  content: "";
  display: block;
  width: 50%;
  height: 6px;
  background: #ebeceb;
  border-radius: 4px;
  position: absolute;
  top: 11px;
  z-index: 1;
}


.step-finely>.item.active:before,
.step-finely>.item.active:after {
  background: #ffaa00;
}

.step-finely>.item:before {
  left: 0;
}

.step-finely>.item:after {
  right: -3px;
}

.step-finely>.item:first-child:before {
  display: none;
}

.step-finely>.item:last-child:after {
  display: none;
}

.step-finely>.item .tip {
  display: block;
  width: 28px;
  line-height: 28px;
  font-size: 14px;
  color: #ccc;
  text-align: center;
  background: #ebeceb;
  border-radius: 14px;
  margin: 0 auto;
  margin-bottom: 10px;
  position: relative;
  z-index: 2;
}

.step-finely>.item.active .tip {
  color: #fff;
  background: #ffaa00;
}

.step-finely>.item .ms {
  display: block;
  line-height: 22px;
  font-size: 14px;
  color: #333;
  text-align: center;
  margin: 0 18px;
}
</style>
